<template>
  <div class="history-card-container">
      <div class="wraper">
          <div class="header" :title="data.title">

            <!-- <video 
            controls
            class="art-video" 
            preload="metadata" 
            crossorigin="anonymous" 
            autoplay="" 
            ></video> -->
            <div class="art-video">
                <img class="extend" :src="data.show_url" alt="">
                <div class="start" @click="startPlay">
                    <img
                        class="extend"
                        src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/icon7.png"
                        alt=""
                    />
              </div>
            </div>
          </div>
          <div class="content">
              {{data.content_desc}}
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'history-card',
    data(){
        return {

        }
    },
    methods:{
        startPlay(){
            window.open(this.data.mp4_url)
        }
    },
    props:{
        data:{}
    }
}
</script>

<style lang="less" scoped>
    .extend{
        width: 100%;
        height: 100%;
        display: block;
    }
    .wraper{
        width: 276px;
        height: 436px;
        .header{
            height: 243px;
            background: #070002;
            cursor: pointer;
            .art-video{
                position: relative;
                width: 100%;
                height: 100%;
                .start {
                    width: 62px;
                    height: 62px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
        .content{
            height:160px;
            width: 100%;
            background: #ECECEC;
            overflow: auto;
            padding: 24px 17px;
            box-sizing: border-box;
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #565656;
            line-height: 25px;
        }
    }
</style>